<template>
    <div class="center-column">
        <div class="no">
            <div class="no-hd">
                <div>125811</div>
                <div>1000000</div>
            </div>
            <div class="no-bd">
                <div>前端需求人数</div>
                <div>市场供应人数</div>
            </div>
        </div>
        <div class="map">
            <div class="china-map" ref='chinaMap'></div>
            <div class="globe"></div>
            <div class="rotate-1"></div>
            <div class="rotate-2"></div>
        </div>
    </div>
</template>

<script>
    import {
        mapOptions
    } from '@/utils/options'
    export default {
        name: 'CenterColumn',
        data() {
            return {
                mapOptions,
                echart: null
            }

        },
        mounted() {
            this.initEcharts()
            window.addEventListener('resize', () => {
                    this.echart.resize()
            })
        },
        methods: {
            initEcharts() {
                this.echart = this.$Echarts.init(this.$refs.chinaMap)
                this.echart.setOption(this.mapOptions)
            }
        }
    }
</script>

<style lang='less' scoped>
    @font-face {
        font-family: electronicFont;
        src: url('~assets/font/DS-DIGIT.TTF');
    }

    .center-column {
        flex: 5;
        height: 90%;
        margin: 0 .125rem .1875rem .125rem;

        .no {
            background-color: rgba(101, 132, 226, 0.1);
            padding: .1875rem;

            .no-hd {
                display: flex;
                border: 1px solid rgba(25, 186, 139, 0.17);
                height: 1rem;

                div {
                    text-align: center;
                    flex: 1;
                    line-height: 1rem;
                    font-size: .875rem;
                    color: #ffeb7b;
                    font-family: electronicFont;
                    position: relative;

                    &:first-child {
                        &::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 30px;
                            height: 10px;
                            border-top: 2px solid #02a6b5;
                            border-left: 2px solid #02a6b5;
                        }

                        &::after {
                            content: '';
                            position: absolute;
                            top: 25%;
                            right: 0;
                            width: 1px;
                            height: 50%;
                            background: rgba(255, 255, 255, 0.2);
                        }

                    }

                    &:nth-child(2) {
                        &::after {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            width: 30px;
                            height: 10px;
                            border-bottom: 2px solid #02a6b5;
                            border-right: 2px solid #02a6b5;
                        }
                    }
                }
            }

            .no-bd {
                display: flex;
                height: .5rem;
                color: rgba(255, 255, 255, 0.7);
                font-size: .225rem;

                div:nth-child(1) {
                    text-align: center;
                    flex: 1;
                    padding-top: .125rem;
                    line-height: .4rem;
                }

                div:nth-child(2) {
                    flex: 1;
                    text-align: center;
                    padding-top: .125rem;
                    line-height: .4rem;
                }
            }

        }
    }

    .map {
        height: 80%;
        position: relative;

        .china-map {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 9;
        }

        .globe {
            width: 6.475rem;
            height: 6.475rem;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-image: url('~assets/images/map.png');
            background-size: 100% 100%;
            opacity: 0.3;
        }

        .rotate-1 {
            width: 8.0375rem;
            height: 8.0375rem;
            background-image: url('~assets/images/lbx.png');
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-size: 100% 100%;
            opacity: 0.6;
            animation: rotate 15s linear infinite;
            z-index: 2;
        }

        .rotate-2 {
            width: 7.075rem;
            height: 7.075rem;
            background-image: url('~assets/images/jt.png');
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-size: 100% 100%;
            opacity: 0.6;
            animation: rotate 15s linear infinite;
            z-index: 2;
        }

        @keyframes rotate {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        @keyframes rotate {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(-360deg);
            }
        }
    }
</style>